<template>
  <el-col class="scroller" v-if="!hide">
    <div class="wrap">
      <div v-if="isShowPosition" class="hotRecruitment">
        <div class="hotRecruitmentTitle">
          <div class="title">推荐岗位</div>
          <div class="more">
            <span @click="handleMoreClick">更多岗位 ></span>
          </div>
        </div>
        <div class="hotRecruitmentList" v-loading="loading">
          <div
            class="hotRecruitmentItem"
            v-for="(item, index) in hotRecruitmentList"
            :key="index"
            @click="toJobDetail(item)"
          >
            <div class="hotRecruitmentItemTitle">
              <el-tooltip
                effect="light"
                :content="item.jtzw"
                placement="left"
                popper-class="careerToolsItemPopper"
              >
                <span class="recuitName">{{ item.jtzw }}</span>
              </el-tooltip>
              <span class="salary">{{ item.xzdy_new }}</span>
            </div>
            <el-tooltip
              effect="light"
              :content="item.cname_all"
              placement="left"
              popper-class="careerToolsItemPopper"
            >
              <div class="hotRecruitmentItemDesc">
                <img
                  :src="item.logo"
                  alt=""
                  srcset=""
                  v-if="item.logo"
                  class="hotRecruitmentItemLogo"
                />
                <span class="cname">{{ item.cname_all }}</span>
                <span class="regionname">{{ item.regionname }}</span>
              </div>
            </el-tooltip>
          </div>
        </div>
        <el-empty
          description="暂无数据"
          v-if="!hotRecruitmentList.length && !loading"
        ></el-empty>
        <div class="checkMoreButton" @click="handleMoreClick">查看全部岗位</div>
      </div>
      <div class="rightNavi" v-if="naviData.length">
        <div class="navDot"></div>
        <div class="rightNaviContainer">
          <div
            class="scrollerFlex"
            v-for="(item, index) in secondLayerList"
            :key="index"
          >
            <div
              :class="{
                title: true,
                online: item.isUse == 2,
                firstSelectedNav: firstSelectedNav == index,
                editedNav: item.currentEdit
              }"
              @click="handleFirstNavClick(item, index)"
            >
              {{ index + 1 }} {{ item.title }}
            </div>
            <div class="childrenList">
              <template v-if="item.title != '工作环境'">
                <div
                  :class="{
                    child: true,
                    secondSelectedNav: secondSelectedNav == index + '-' + _index
                  }"
                  v-for="(_item, _index) in item.children"
                  @click="handleNavClick(item, _item, index, _index)"
                  :key="index + '' + _index"
                >
                  <span
                    :class="{
                      childDot: true,
                      secondSelectedDot:
                        secondSelectedNav == index + '-' + _index
                    }"
                  ></span
                  >{{ _item.title }}
                </div>
              </template>
              <template v-if="item.title == '工作环境'">
                <div
                  :class="{
                    child: true,
                    secondSelectedNav:
                      secondSelectedNav == `${workEnviromentIndex}-0`
                  }"
                  @click="handleNavClick({}, {}, workEnviromentIndex, 0)"
                >
                  <span
                    :class="{
                      childDot: true,
                      secondSelectedDot:
                        secondSelectedNav == `${workEnviromentIndex}-0`
                    }"
                  ></span
                  >工作时间和强度
                </div>
                <div
                  :class="{
                    child: true,
                    secondSelectedNav:
                      secondSelectedNav == `${workEnviromentIndex}-1`
                  }"
                  @click="handleNavClick({}, {}, workEnviromentIndex, 1)"
                >
                  <span
                    :class="{
                      childDot: true,
                      secondSelectedDot:
                        secondSelectedNav == `${workEnviromentIndex}-1`
                    }"
                  ></span
                  >工作场所和工伤防范
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="editStatistics">
        <div class="historyTitle">历史编辑统计</div>
        <div class="aditContent">
          <div class="grey">编辑次数</div>
          <div class="editContentText">
            {{ editData.editNum }}次历史版本
          </div>
        </div>
        <div class="aditContent">
          <div class="grey">浏览次数</div>
          <div class="editContentText">
            {{ editData.viewNum }}次
          </div>
        </div>
        <div class="aditContent">
          <div class="grey">最近更新</div>
          <div class="editContentText">
            {{ editData.editPerson}}{{editData.editTime ? `(${editData.editTime})` : ""}}
          </div>
        </div>
        <div class="aditContent">
          <div class="grey">
            突出贡献
            <img class="huizhang" src="@/icons/huizhang.png" />
          </div>
          <div class="editContentText" v-for="(item, index) in editData.contributePersonList" :key="index">
            {{ item }}
          </div>
        </div>
      </div> -->
    </div>
  </el-col>
</template>

<script>
import { campusJobSearch } from '@/api/home';
import { historyStat } from '@/api/position-detail';
export default {
  name: 'rightsideScroller',
  props: {
    secondLayerList: {
      //要传有1，2级维度的过来，生成1，2级的导航
      type: Array,
      required: true
    },
    workEnviromentIndex: {
      type: [Number, String],
      default: 1
    }
  },
  data() {
    return {
      isClickScroll: false,
      firstSelectedNav: 0,
      valueSelectedNav: 0, //这个是用来在代码中判断下标的的。。
      secondSelectedNav: '0-0', //这个是用来判断样式的
      editData: {},
      naviData: [],
      FirstDomItems: [],
      secondDomItems: [],
      secondSelector: '.demo-autocomplete',
      timer: null,
      hide: false,
      loading: false,
      hotRecruitmentList: [],
      isShowPosition: true
    };
  },
  watch: {
    secondLayerList: {
      handler(newValue, oldValue) {
        if (newValue.length) {
          this.naviData = newValue;
        }
      },
      immediate: true
    }
  },
  created() {
    const ylPositionName = this.$route.query.name;
    this.reqCampusJobSearch(ylPositionName);
  },
  mounted() {
    //如果是外部iframe引用的话就把右侧边栏隐藏
    if (this.$route.name == 'detailForFrame') {
      this.hide = true;
      return;
    }
    this.$bus.$on('menuSetRightNavActive', this.menuSetRightNavActive);
    this.getHistoryStat();

    document
      .querySelector('.careerOverviewWrapper')
      .addEventListener('scroll', this.handleScroll);
    let SecretKey =
      this.$route.query.SecretKey || localStorage.getItem('SecretKey');
    //河南测绘学院隐藏校招岗位
    if (SecretKey == '94cbe78f3bcec8be756042d1554c13b5') {
      this.isShowPosition = false;
    }
  },
  beforeMount() {
    this.$bus.$off('menuSetRightNavActive', this.menuSetRightNavActive);
  },
  methods: {
    reqCampusJobSearch(ylPositionName) {
      const params = {
        matchZpName: ylPositionName,
        pageNo: 1,
        pageSize: 6,
        keytypes: '3'
      };
      if (localStorage.getItem('extra')) {
        const extra = JSON.parse(localStorage.getItem('extra'));
        if (extra.regionId) {
          params.regionId = extra.regionId;
        }
      }
      this.loading = true;
      campusJobSearch(params)
        .then((res) => {
          if (res.code == 200) {
            res.data.forEach((item, index) => {
              if (item.logo) {
                item.logo = item.logo.replace(/http:\/\//g, '//');
              }
            });
            this.hotRecruitmentList = res.data;
          }
        })
        .catch((e) => {
          console.log(e);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    toJobDetail(item) {
      let routeData = this.$router.resolve({
        path: `/job-detail?companyId=${item.uid}&zp_id=${item.id}`
      });
      window.open(routeData.href, '_blank');
    },
    handleMoreClick() {
      //获取当前url路径，删除query参数并替换为position路由，然后用新窗口打开
      const href = window.location.href.replace(
        /\/position-detail\?.*$/,
        '/position?'
      );
      sessionStorage.setItem('switchToCampus', 1);
      window.open(href, '_blank');
    },
    // 滚动相关的
    handleScroll() {
      if (this.isClickScroll) return;
      if (!this.FirstDomItems.length) {
        this.FirstDomItems = document.querySelectorAll('.cardWrapper');
        //如果Firstitems在这里为空，那就是去到了薪酬待遇页面
        if (this.FirstDomItems.length == 0) {
          this.FirstDomItems = document.querySelectorAll('.salary-container');
          this.secondSelector = '.tinyTitle';
        }
        this.secondDomItems = this.FirstDomItems[0].querySelectorAll(
          this.secondSelector
        );
      } else {
        //真正核心的代码
        // console.log("this.FirstDomItems", this.FirstDomItems);
        // console.log("this.secondDomItems", this.secondDomItems);
        const nextItem = this.FirstDomItems[+this.firstSelectedNav + 1];
        const preItem = this.FirstDomItems[+this.firstSelectedNav - 1];
        const nowItem = this.FirstDomItems[+this.firstSelectedNav];
        const nextSecondItem = this.secondDomItems[+this.valueSelectedNav + 1];
        const preSecondItem = this.secondDomItems[+this.valueSelectedNav - 1];
        // console.log('this.nowItem', nowItem);
        // console.log('this.nextSecondItem', nextSecondItem);

        // console.log('this.preSecondItem', preSecondItem);

        if (nextItem && nextItem.getBoundingClientRect().top - 162 < 0) {
          this.firstSelectedNav += 1;
          this.valueSelectedNav = 0;
          this.secondSelectedNav =
            this.firstSelectedNav + '-' + this.valueSelectedNav;
          this.getSecondDomsFromFirstDomItem(nextItem);
        }
        if (nowItem && nowItem.getBoundingClientRect().top - 142 > 0) {
          if (this.firstSelectedNav > 0) {
            this.firstSelectedNav -= 1;
          }
          this.secondSelectedNav =
            this.firstSelectedNav + '-' + this.valueSelectedNav;
          this.getSecondDomsFromFirstDomItem(preItem, 'pre');
        }

        if (
          nextSecondItem &&
          nextSecondItem.getBoundingClientRect().top - 142 < 0
        ) {
          this.valueSelectedNav += 1;
          this.secondSelectedNav =
            this.firstSelectedNav + '-' + this.valueSelectedNav;
        }
        if (
          preSecondItem &&
          preSecondItem.getBoundingClientRect().top - 142 > 0
        ) {
          if (this.secondSelectedNav == '0-0') return;

          this.valueSelectedNav -= 1;
          this.secondSelectedNav =
            this.firstSelectedNav + '-' + this.valueSelectedNav;
        }
        this.$nextTick(() => {
          const selectedHeight =
            document.querySelector('.secondSelectedNav') &&
            document.querySelector('.secondSelectedNav').offsetTop;
          document.querySelector('.navDot').style.marginTop =
            selectedHeight + 'px';
        });
      }
    },
    getSecondDomsFromFirstDomItem(domItem, flag) {
      if (!domItem) return;
      // console.log('this.FirstDomItems', this.FirstDomItems);
      // console.log('domItem', domItem);
      this.secondDomItems = domItem.querySelectorAll(this.secondSelector);
      if (flag == 'pre') {
        this.valueSelectedNav = this.secondDomItems.length - 1;
        this.secondSelectedNav =
          this.firstSelectedNav + '-' + this.valueSelectedNav;
      }
    },
    getHistoryStat() {
      historyStat({
        ylPositionId: this.$route.query.id
      }).then((res) => {
        this.editData = res.data;
      });
    },
    handleFirstNavClick(item, index) {
      this.isClickScroll = true;
      clearTimeout(this.timer);
      this.firstSelectedNav = index;
      this.secondSelectedNav = index + '-' + 0;
      this.$nextTick(() => {
        const selectedHeight =
          document.querySelector('.secondSelectedNav') &&
          document.querySelector('.secondSelectedNav').offsetTop;
        document.querySelector('.navDot').style.marginTop =
          selectedHeight + 'px';
      });
      var el = document.getElementById('scroll' + index + '-' + 0);

      if (el) {
        el.scrollIntoView({
          behavior: 'smooth',
          block: 'start',
          inline: 'nearest'
        });
        setTimeout(() => {
          this.isClickScroll = false;
        }, 1200);
      }
    },
    handleNavClick(item, _item, index, _index) {
      // //console.log("点击维度：", _item.title, _item.layerId);

      this.isClickScroll = true;
      clearTimeout(this.timer);
      this.firstSelectedNav = index;
      this.secondSelectedNav = index + '-' + _index;

      this.$nextTick(() => {
        const selectedHeight =
          document.querySelector('.secondSelectedNav') &&
          document.querySelector('.secondSelectedNav').offsetTop;
        document.querySelector('.navDot').style.marginTop =
          selectedHeight + 'px';
      });
      let scrollInd = index;
      this.secondLayerList.forEach((value, ind) => {
        if (value.layerId == item.layerId) {
          scrollInd = ind;
        }
      });
      console.log('scroll' + scrollInd + '-' + _index);
      var el = document.getElementById('scroll' + scrollInd + '-' + _index);
      // //console.log("scroll" + scrollInd + "-" + _index);

      if (el) {
        el.scrollIntoView({
          behavior: 'smooth',
          block: 'start',
          inline: 'nearest'
        });
      }
      this.timer = setTimeout(() => {
        this.isClickScroll = false;
      }, 1200);
    },
    menuSetRightNavActive(firstSelectedNav) {
      this.isClickScroll = true;
      clearTimeout(this.timer);
      this.firstSelectedNav = firstSelectedNav;
      this.secondSelectedNav = firstSelectedNav + '-' + 0;
      this.$nextTick(() => {
        const selectedHeight =
          document.querySelector('.secondSelectedNav') &&
          document.querySelector('.secondSelectedNav').offsetTop;
        document.querySelector('.navDot').style.marginTop =
          selectedHeight + 'px';
      });
      this.timer = setTimeout(() => {
        this.isClickScroll = false;
      }, 1200);
    }
  }
};
</script>

<style lang="scss" scoped>
.scroller {
  position: sticky;
  width: 210px;
  height: calc(100vh - 150px);
  top: -14px;
  color: #bfbfbf;
  font-size: 14px;
  line-height: 20px;
  border: 1px solid #cbdcfe;
  margin-top: -14px;
  // border-radius: 18px 18px 0px 0px;
  .wrap {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    overflow-y: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
  }
  .hotRecruitment {
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    padding: 0 17px 0 17px;
    // max-height: 563px;
    // overflow-y: scroll;
    background: linear-gradient(
      178deg,
      #e7fff5 0%,
      rgba(255, 255, 255, 0) 28px
    );
    padding-top: 19px;
    padding-bottom: 17px;
    &::-webkit-scrollbar {
      display: none;
    }
    &::-webkit-scrollbar-thumb {
    }
    // height: 254px;
    .hotRecruitmentTitle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #100f0f;
      font-size: 16px;
      font-weight: 800;
      line-height: 22px;
      height: 20px;
      margin-bottom: 24px;
      .more {
        height: 20px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #999999;
        line-height: 20px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        cursor: pointer;
        &:hover {
          color: #076afe;
          text-decoration: underline;
        }
      }
    }
    .hotRecruitmentList {
      .hotRecruitmentItem {
        margin-bottom: 24px;
        cursor: pointer;
        .hotRecruitmentItemTitle {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #222222;
          line-height: 18px;
          text-align: left;
          font-style: normal;
          margin-bottom: 9px;
          .recuitName {
            max-width: 75px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
          .salary {
            height: 18px;
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 14px;
            color: #d5413d;
            line-height: 18px;
            text-align: left;
            font-style: normal;
          }
        }
        .hotRecruitmentItemDesc {
          display: flex;
          align-items: center;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #a2a5b3;
          line-height: 18px;
          text-align: left;
          font-style: normal;
          .hotRecruitmentItemLogo {
            width: 18px;
            height: 18px;
            margin-right: 8px;
          }
          .cname {
            flex: 1;
            // max-width: 49px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
          .regionname {
            margin-left: 18px;
            text-align: right;
          }
        }
      }
    }
    .checkMoreButton {
      // width: 156px;
      background: rgba(72, 128, 255, 0.05);
      border-radius: 8px;
      border: 1px solid #4880ff;
      // margin: 0 auto;
      padding: 10px 32px;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 15px;
      color: #4880ff;
      cursor: pointer;
    }
  }
  .rightNavi {
    position: relative;
    display: flex;
    // height: calc(100vh - 470px);
    // flex: 1;
    // overflow-y: auto;
    background: linear-gradient(
      178deg,
      #ecf4ff 0%,
      rgba(255, 255, 255, 0) 44px
    );
    &::-webkit-scrollbar {
      width: 4px;
      background-color: #fff;
      border-radius: 4px;
      height: 4px;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #d8d8d8;
      border-radius: 4px;
    }
    .navDot {
      width: 0;
      height: 0;
      margin-top: 10px;
      border-left: 8px solid #0b6eff;
      border-bottom: 8px solid transparent;
      border-top: 8px solid transparent;
      transition: margin-top 0.1s ease-in-out;
    }
    .firstSelectedNav {
      color: #0b6eff !important;
    }
    .firstSelectedNav + .childrenList .secondSelectedNav {
      color: #0b6eff !important;
      .childDot {
        color: #0b6eff;
      }
    }
    .editedNav {
      color: #44d184;
      position: relative;
      &::after {
        content: '';
        position: absolute;
        left: -15px;
        top: 7px;
        width: 4px;
        height: 5px;
        background: #44d184;
        border-radius: 50%;
      }
    }
    .scrollerFlex {
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 14px;
      margin: 8px 12px;
      margin-left: 5px;
      border: 10px;
      cursor: pointer;
      .title {
        display: flex;
        align-items: center;
        color: #bfbfbf;

        font-weight: bold;
      }
      .online {
        color: #555555;
      }
      .menuEditState {
        width: 20px;
        height: 20px;
      }
      .childrenList {
        margin-left: 12px;
        .child {
          display: flex;
          // align-items: center;
          // height: 20px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #bfbfbf;
          line-height: 20px;
          margin: 5px 0;
        }
        .childDot {
          width: 5px;
          height: 5px;
          background: #d9d9d9;
          border-radius: 50%;
          margin-right: 8px;
          margin-top: 8px;
        }
        .secondSelectedDot {
          background: #0b6eff;
        }
      }
    }
  }
  .editStatistics {
    flex-shrink: 0;
    // position: absolute;
    // bottom: 0;
    width: 100%;
    // height: 298px;
    margin: 8px 0px 0px 0;
    background-image: linear-gradient(160deg, #e0ebfd 0%, #fff 20%, #fff 100%);
    border: #f5f5f5 1px solid;
    .grey {
      color: #a2a5b3;
      font-size: 13px;
      display: flex;
      align-items: center;
    }
    .editContentText {
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #555555;
      line-height: 22px;
    }
    .huizhang {
      width: 16px;
      height: 16px;
      margin-left: 3px;
    }
    .historyTitle {
      width: 97px;
      height: 20px;
      font-size: 14px;
      font-family: PingFang-SC-Heavy, PingFang-SC;
      font-weight: 800;
      color: #076afe;
      line-height: 20px;
      margin-left: 18px;
      margin-top: 12px;
    }
    .aditContent {
      margin: 6px 0 10px 18px;
    }
  }
}
</style>
